<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Cropper.js</title>
    <link rel="stylesheet" href="assets/css/cropper.css">
</head>
 
<body>

<input type="text" class="form-control" id="sfzh" name="sfzh" placeholder="请输入18位身份证号" datatype="IdCard" msg="身份证号不正确">
<input type="text" class="form-control" id="lxdh" name="lxdh" placeholder="请输入钉钵的电话" datatype="mod" msg="电话不正确">
    <br /> <button class="tan-up-btn" id="choose"> 选择要上传的文件</button>
        
	
			<div class="tan-show-option">
               <div class="container">
                	<img src="" alt="" id="image">
               </div>
               <div class="preview previewImg">
                 <img src="" id="imga" alt=""  height="100%">
               </div>
               <button class="upload" id="CutImgEvent">上传图片</button>
               <input type="file" id="imgfile" accept="image/jpg,image/jpeg,image/png">  
            </div>	
				

    <script src="assets/js/jquery-2.1.1.js"></script>
    <script src="assets/js/cropper.min.js"></script>
    <script>
      
        $("#choose").click(function(){
          $("#imgfile").click();
		 // alert("ggg");
        })
		
		
        var image = document.getElementById('image');
        var cropper, canvas;
        $('#imgfile').change(function(e){
            var file;
            var files = e.target.files;
             if (files && files.length > 0) {
                file = URL.createObjectURL(files[0]);
                $('#image').attr({'src': file})
            }
            if(cropper!=undefined){
              cropper.destroy()
            }
             cropper = new Cropper(image, {
                aspectRatio: 3/4,
                background: true,  //是否显示网格背景
                zoomable: true,   //是否允许放大图像
                guides: true,   //是否显示裁剪框虚线
                crop: function (event) { //剪裁框发生变化执行的函数。
                    canvas = cropper.getCroppedCanvas({  //使用canvas绘制一个宽和高200的图片
                        width: 300,
                        height: 400,
                    });
                    $('#imga').attr("src", canvas.toDataURL("image/png", 0.3))  //使用canvas toDataURL方法把图片转换为base64格式
                }
            });
        })
         $("#CutImgEvent").click(function(){
           var sfzh = $("#sfzh").val();
	       var lxdh= $("#lxdh").val();
           console.log($("#imga").attr("src"))
           var formData = new FormData($("#registerForm")[0]);
		formData.append("imgBase64", encodeURIComponent($("#imga").attr("src")));
		formData.append("sfzh", sfzh);
		$.ajax({
			url: "../upload.php",
			type: 'POST',
			data: formData,
			timeout: 10000,
			async: true,
			cache: false,
			contentType: false,
			processData: false,
			success: function(result) {
				alert(result)
			},
			error: function(returndata) {
				Alert.closedLoading()
			}
		})
         })
       
    </script>
</body>
 
</html>
